<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/script.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>

<body>

    <template id="select-list">
        <div class="select-list-wrap" :class="{ 'show-select' : showSelect }" @click="showSelectList">
            <div class="select-list-select-item">
                <span>{{ selectItem }}</span>
                <svg class="icon" viewBox="0 0 1024 1024" width="20" height="20">
                    <path
                        d="M579.043 792.408l418.544-418.641c25.83-25.827 33.48-64.34 19.53-98.087-13.95-33.655-46.79-55.52-83.14-55.52L96.8 220.16c-36.352 0-69.205 21.955-83.147 55.52-4.59 11.157-6.842 22.86-6.842 34.47 0 23.395 9.177 46.43 26.365 63.62l418.641 418.639c16.912 16.91 39.772 26.365 63.622 26.365 23.84 0 46.795-9.535 63.62-26.365L579.043 792.409 579.043 792.408z"
                        fill="#ffffff">
                    </path>
                </svg>
            </div>
            <div class="select-list-content" ref="selectListContent" @click.stop="hideSelectList">
                <ul>
                    <li v-for="item in list" @click="select(item)">{{ item }}</li>
                </ul>
            </div>
        </div>
    </template>

    <div id="app">
        <select-list :list="list" @select="select"></select-list>
        <select-list :list="list" default="CSS3" @select="select"></select-list>
    </div>

</body>

</html>